<template>
  <div class="login-page">
    <!-- 顶部标题区域 -->
    <div class="top-bar">
      <h1 class="title">河北协会"易投保"平台</h1>
    </div>
    <!-- 卡片内容区域 -->
    <div class="login-card">
      <div class="avatar">
        <van-icon name="user-o" size="40" color="#1989fa" />
      </div>
      <h2 class="welcome-text">欢迎登录</h2>
      <p class="tip-text">请输入账号密码登录</p>
      <!-- 表单区域 -->
      <van-cell-group>
        <van-field
          v-model="phone"
          name="phone"
          label="手机号"
          placeholder="请输入手机号"
          :border="false"
        />
        <van-field
          v-model="password"
          name="password"
          label="密码"
          placeholder="请输入密码"
          :border="false"
          left-icon="lock-o"
          :type="showPassword ? 'text' : 'password'"
        >
          <template #right-icon>
            <van-icon
              :name="showPassword ? 'closed-eye' : 'eye-o'"
              @click="showPassword = !showPassword"
            />
          </template>
        </van-field>
        <van-field
          v-model="code"
          name="code"
          label="验证码"
          placeholder="请输入4位验证码"
          :border="false"
        >
          <template #button>
            <div class="code-box">
              <img @click="getUuid()" :src="base64Img" alt="">
            </div>
          </template>
        </van-field>
      </van-cell-group>
      <van-button
        type="primary"
        block
        class="login-btn"
        @click="handleLogin"
      >
        登录
      </van-button>
      <!-- 底部链接区域 -->
      <div class="links">
        <van-nav-bar
          border="false"
          class="link-bar"
          left-arrow="false"
        >
          <template #left>
            <a class="link-item" @click="goChangPassword()">忘记密码?</a>
          </template>
          <template #right>
            <a @click="goUserRegister()" class="link-item">没有账号？立即注册</a>
          </template>
        </van-nav-bar>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { showToast } from 'vant';
import {
	createNumericCaptchaImage,ytblogin
} from '/@/api/auth/ytb.ts'
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()
const uuid = ref('')
const phone = ref('');
const password = ref('');
const code = ref('');
const showPassword = ref(false);
const base64Img = ref('')
const handleLogin = async() => {
  // 这里简单做下表单校验示例，实际需结合后端接口
  if (!phone.value) {
    showToast('请输入手机号');
    return;
  }
  if (!password.value) {
    showToast('请输入密码');
    return;
  }
  if (!code.value || code.value.length!==4) {
    showToast('请输入4位验证码');
    return;
  }
  const res = await ytblogin({phone: phone.value, password: password.value, code: code.value , uuid: uuid.value})
  if(res.code == 200) {
    sessionStorage.setItem('token',res.token)
    router.push({ name: 'jump', query: { } })
  } else {
    code.value = ''
    getUuid()
  }
  showToast(res.msg)
  // 若校验通过，可发起登录请求，这里仅打印
  // console.log('手机号：', phone.value, '密码：', password.value, '验证码：', code.value);
  // 实际项目中：
  // axios.post('/login', { phone: phone.value, password: password.value, code: code.value })
  //  .then(res => {
  //     // 处理登录成功逻辑，如跳转首页等
  //   })
  //  .catch(err => {
  //     showToast('登录失败，请重试');
  //   });
};
const goChangPassword = ()=>{
  router.push({ name: 'changPassword', query: { } })
}
const goUserRegister = ()=>{
  router.push({ name: 'UserRegister', query: { } })
}
const getUuid = async() => {
  const res = await createNumericCaptchaImage()
  base64Img.value = 'data:image/png;base64,' + res.img
  uuid.value = res.uuid
}
onMounted( async () => {
  getUuid()
})
</script>

<style lang="less" scoped>
::v-deep .van-cell  {
    display: flex;
    align-items: center;
    .van-cell__title {
      width: 50px!important
    }
}

.login-page {
  width: 100%;
  min-height: 100vh;
  background: #fff;
}
.top-bar {
  background: linear-gradient(120deg, #409eff, #66b1ff);
  padding: 40px 20px;
}
.title {
  font-size: 20px;
  color: #fff;
  font-weight: bold;
}
.login-card {
  margin: -25px 20px 0;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.avatar {
  text-align: center;
  margin-bottom: 10px;
}
.welcome-text {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}
.tip-text {
  text-align: center;
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}
.code-box {
  padding: 6px 12px;
  background: #f5f7fa;
  border-radius: 4px;
  color: #666;
  img {
    width: 50px;
    height: 30px;
  }
}
.login-btn {
  margin-top: 20px;
}
.links {
  margin-top: 15px;
}
.link-bar {
  background: transparent;
}
.link-item {
  color: #1989fa;
  text-decoration: none;
  font-size: 14px;
}
</style>